<template>
  <div id="app">
    <img src="./assets/logo.png">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>

    <div>
      <el-button type="primary" @click="startHacking">  开启消息提示   </el-button>
      <el-button type="primary" size="medium" icon="el-icon-search">搜索</el-button>
      <el-button-group>
        <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
        <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
      <el-button type="primary" :loading="true">加载中</el-button>
    </div>

    <el-radio v-model="radio" label="1">备选项</el-radio>
    <el-radio v-model="radio" label="2">备选项</el-radio>
    <el-radio v-model="radio" label="3">备选项</el-radio>
    <el-radio v-model="radio" label="4">备选项</el-radio>
    <el-radio v-model="radio" label="5">备选项</el-radio>

    <div>
      <el-radio-group v-model="radio3">
        <el-radio-button label="上海"></el-radio-button>
        <el-radio-button label="北京"></el-radio-button>
        <el-radio-button label="广州"></el-radio-button>
        <el-radio-button label="深圳"></el-radio-button>
      </el-radio-group>
    </div>


    <el-progress type="circle" :percentage="0"></el-progress>
    <el-progress type="circle" :percentage="25"></el-progress>
    <el-progress type="circle" :percentage="100" status="success"></el-progress>
    <el-progress type="circle" :percentage="50" status="exception"></el-progress>

    <div class="block">
      <span class="demonstration">页数较少时的效果</span>
      <el-pagination
              layout="prev, pager, next"
              :total="50">
      </el-pagination>
    </div>
    <div class="block">
      <span class="demonstration">大于 7 页时的效果</span>
      <el-pagination
              layout="prev, pager, next"
              :total="1000">
      </el-pagination>
    </div>

    <div>
      <el-badge :value="12" class="item">
        <el-button size="small">评论</el-button>
      </el-badge>
      <el-badge :value="3" class="item">
        <el-button size="small">回复</el-button>
      </el-badge>

    </div>
  </div>
</template>

<script>
export default {
    data () {
        return {
            radio3: '上海',
            radio4: '上海',
            radio5: '上海',
            radio6: '上海'
        };
    },
    methods: {
    startHacking () {
      this.$notify({
        title: 'It works!',
        type: 'success',
        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
        duration: 5000
      })
    }
  }
}
</script>

<style>
  .item {
    margin-top: 10px;
    margin-right: 40px;
  }

  #app {
  font-family: Helvetica, sans-serif;
  text-align: center;
}
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

</style>
